<template>
	<view>
		<view class="shop_list">
			<view class="item clearfix" v-for="item in list">
				<view class="left">
					<image :src="$enviorment + item.mendian_picture"  mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="name uni-ellipsis">
						{{item.mendian_name}}
					</view>
					<view class="label_box">
						<text v-if="item.mendian_tese">{{item.mendian_tese}}</text>
					</view>
					<view class="address uni-ellipsis">
						{{item.mendian_address}}
					</view>
					<view class="info">
						<text><image src="../static/index_01.png" mode="widthFix" style="width: 18rpx;height: 18rpx;"></image>{{item.num_dingdan}}单</text>
						<text><image src="../static/index_02.png" mode="widthFix" style="width: 22rpx;height: 18rpx;"></image>{{item.num_pingjia}}评价</text>
						<text><image src="../static/index_03.png" mode="widthFix" style="width: 18rpx;height: 22rpx;position: relative;top: 4rpx;"></image>20{{item.distanceFixed}}km</text>
					</view>
					<view class="btn" @click="orderShop(item.mendian_id)">预约</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				item_id:"",
				$enviorment:this.$enviorment,
				// item_id:"6a7d8420-016e-47b1-92b6-582839d3036e"
			}
		},
		onLoad(option) {
			this.item_id = option.id;
			this.getList();
		},
		methods: {
			//预约
			orderShop(mendian_id){
				this.$get('customer_item_mendian_yuyue.ashx',{
					mendian_id,
					customer_item_id:this.item_id,
				},(res)=>{
					if(res.data == 1){
						uni.showToast({
						   title: '预约成功！',
						});
						uni.switchTab({url:"/pages/my/my"})
					}else{
						uni.showToast({
						   title: '预约失败！',
						});
					}
				})
			},
			getList() {
				uni.getLocation({
				    success: (res)=> {
						var longitude = res.longitude;
						var latitude = res.latitude;
						this.$get('customer_item_mendian.ashx',{
							customer_item_id:this.item_id,
							Gpsx:longitude,
							Gpxy:latitude,
							city:'常州'
							// city:uni.getStorageSync('userInfo').city
						},(res)=>{
							if(res.data){
								this.list = res.data
								this.list.forEach((item)=>{
									item.distanceFixed = (item.distance/1000).toFixed(2)
								})
							}
						})
						console.log(res);
				        // console.log('当前位置的经度：' + res.longitude);
				        // console.log('当前位置的纬度：' + res.latitude);
				    },
					fail: function (res) {
				
				    },
				});
				
			},
		}
	}
</script>

<style scoped>
	
	.shop_list{background-color: #fff;}
	.shop_list .item{
		padding: 20rpx;
		border-bottom: 1px solid #E5E5E5;
	}
	.shop_list .item .left{
		float: left;
	}
	.shop_list .item .left image{
		width: 165rpx;
		height: 135rpx;
	}
	.shop_list .item .right{
		float: left;
		width: calc(100% - 165rpx);
		padding-left: 20rpx;
		box-sizing: border-box;
		position: relative;
		padding-right: 90rpx;
	}
	.shop_list .item .right .name{
		font-size: 30rpx;
		color: #333333;
		line-height: 30rpx;
	}
	.shop_list .item .right .label_box text{
		font-size: 22rpx;
		line-height: 24rpx;
		color: #fff;
		border-radius: 24rpx;
		margin-right: 20rpx;
		background-color: #ff8c36;
		padding: 0 20rpx;
	}
	.shop_list .item .right .label_box{
		height: 50rpx;
	}
	.shop_list .item .right .address{
		color: #999999;
		line-height: 24rpx;
		font-size: 24rpx;
	}
	.shop_list .item .right .info text{
		margin-right: 20rpx;
		font-size: 20rpx;
		color: #999999;
	}
	.shop_list .item .right .info image{
		margin-right: 5rpx;
	}
	.shop_list .item .right .btn{
		width:80rpx;
		height:40rpx;
		line-height: 40rpx;
		background:rgba(255,223,199,1);
		border-radius:20rpx;
		text-align: center;
		color: #FF8C36;
		font-size: 24rpx;
		position: absolute;
		right: 0rpx;
		top: 60rpx;
	}
</style>
